<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>canvas</title>
    <style>
      /* #charts {
        background-color: gray;
      } */
    </style>
  </head>
  <body>
    <!--
      1. 准备一个具备宽高的canvas
        canvas本身并不具备绘图能力，只是一个画布
        绘制的内容由js来控制
    -->
    <canvas id="charts" width="800" height="450"></canvas>
    <script>
      // 2. 获取画笔
      const charts = document.getElementById('charts')
      const ctx = charts.getContext('2d')

      ctx.beginPath()
      // 灰线
      ctx.strokeStyle = '#d3d3d3'
      ctx.moveTo(100, 100)
      ctx.lineTo(700, 100)

      ctx.moveTo(100, 150)
      ctx.lineTo(700, 150)

      ctx.moveTo(100, 200)
      ctx.lineTo(700, 200)

      ctx.moveTo(100, 250)
      ctx.lineTo(700, 250)

      ctx.moveTo(100, 300)
      ctx.lineTo(700, 300)

      ctx.stroke()
      ctx.closePath()

      ctx.beginPath()
      ctx.strokeStyle = '#000'
      // 标题文字
      ctx.font = '25px 微软雅黑'
      ctx.fillText('数据可视化', 50, 50)

      // 坐标轴
      ctx.moveTo(100, 100)
      ctx.lineTo(100, 350)
      ctx.lineTo(700, 350)
      ctx.stroke()
      // y 刻度线 和 值
      ctx.font = '10px 微软雅黑'
      ctx.textBaseline = 'middle'
      ctx.textAlign = 'right'

      ctx.moveTo(100, 100)
      ctx.lineTo(92, 100)
      ctx.fillText(150, 88, 100)

      ctx.moveTo(100, 150)
      ctx.lineTo(92, 150)
      ctx.fillText(120, 88, 150)

      ctx.moveTo(100, 200)
      ctx.lineTo(92, 200)
      ctx.fillText(90, 88, 200)

      ctx.moveTo(100, 250)
      ctx.lineTo(92, 250)
      ctx.fillText(60, 88, 250)

      ctx.moveTo(100, 300)
      ctx.lineTo(92, 300)
      ctx.fillText(30, 88, 300)

      ctx.moveTo(100, 350)
      ctx.lineTo(92, 350)
      ctx.fillText(0, 88, 350)

      // x 刻度线 和 值
      ctx.moveTo(100, 350)
      ctx.lineTo(100, 358)

      ctx.moveTo(250, 350)
      ctx.lineTo(250, 358)

      ctx.moveTo(400, 350)
      ctx.lineTo(400, 358)

      ctx.moveTo(550, 350)
      ctx.lineTo(550, 358)

      ctx.moveTo(700, 350)
      ctx.lineTo(700, 358)

      ctx.font = '14px 微软雅黑'
      ctx.textAlign = 'center'
      ctx.fillText('食品', 175, 365)
      ctx.fillText('数码', 325, 365)
      ctx.fillText('服饰', 475, 365)
      ctx.fillText('箱包', 625, 365)

      // 绘制矩形
      ctx.fillStyle = 'yellowgreen'
      // x = 100 + 25
      // y = 250 - (250 / 150 * z) + 100
      // const height = (250 / 150) * z
      // const y = 250 - height + 100
      ctx.fillRect(125, 250 - (250 / 150) * 100 + 100, 100, (250 / 150) * 100)
      ctx.fillRect(275, 250 - (250 / 150) * 120 + 100, 100, (250 / 150) * 120)
      ctx.fillRect(425, 250 - (250 / 150) * 90 + 100, 100, (250 / 150) * 90)
      ctx.fillRect(575, 250 - (250 / 150) * 150 + 100, 100, (250 / 150) * 150)

      ctx.stroke()
      ctx.closePath()
    </script>
  </body>
</html>
